<template>
    <view class="container" :style="themeColor">
        <view class="order-item-box" v-if="data">
            <view class="item">
                <view class="order-detail-item" v-for="item in data">
                    <image
                        v-show="!getAppSet().isOneSpec"
                        class="product-img"
                        mode="aspectFill"
                        :src="item.ProductImage ? easyGetImgUrl(item.ProductImage) : '/static/img/no-img.jpg'"></image>
                    <view class="product-info">
                        <view class="product-name"
                            ><text>{{ item.Name }}</text
                            ><text class="product-price">￥{{ item.Price }}</text></view
                        >
                        <view class="product-bottom">
                            <text class="product-desc">{{ item.Attribute ? item.Attribute : "" }}</text>
                            <text class="product-num"
                                >x{{ item.Amount }}{{ item.UnitName ? item.UnitName : item.RationUnit }}</text
                            >
                        </view>
                    </view>
                </view>
            </view>

            <view class="bottom">
                <view class="num">种类：{{ data.length }} 数量：{{ getTotalNum() }}</view>
                <view class="pay-price">
                    <text>总计:</text>
                    <text class="pay-price-text">￥{{ otherData.ProductPrice }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            id: 0,
            data: null,
            otherData: {},
            isLoading: false,
        }
    },
    onLoad(e) {
        this.otherData = JSON.parse(decodeURIComponent(e.data))
        this.data = this.otherData.DetailList
    },
    mounted() {},
    methods: {
        getTotalNum() {
            let num = 0
            this.data.forEach((e) => {
                num += e.Amount
            })
            return num
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding: $app-page-padding;
    .item {
        padding: $app-page-padding $app-page-padding 0;
    }
    .bottom {
        padding-left: $app-page-padding;
        display: flex;
        flex-direction: row;
        border-top: solid 1rpx $uni-bg-color-grey;
        align-items: center;
        .num {
            display: flex;
            flex: 1;
            align-items: center;
        }
    }
    .order-detail-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 30rpx;
        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 15rpx;
        }
        .product-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            .product-name {
                font-weight: 500;
                font-size: $font-size-26;
                color: $app-color-text-main;
                margin-bottom: 6rpx;
                display: flex;
                justify-content: space-between;
            }
            .product-desc {
                font-size: $font-size-20;
                color: $app-color-text-tip;
                margin-bottom: 20rpx;
            }
            .product-bottom {
                display: flex;
                // flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .product-name {
                    product-num: $font-size-24;
                    color: $color-black;
                }
            }
            .product-price {
                font-size: $font-size-28;
                color: $color-orange-1;
            }
        }
    }
}
</style>
